<template>
  <div class="main-content">
    <h3>添加讲师</h3>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm form-size">
      <el-form-item label="讲师姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="讲师头衔" prop="level">
        <el-select v-model="ruleForm.level" placeholder="请选择讲师头衔">
          <el-option label="高级讲师" value="0"></el-option>
          <el-option label="首席讲师" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="所属部门" prop="dept">
        <el-cascader
          :show-all-levels="false"
          v-model="ruleForm.dept"
          :options="options"
          @change="handleChange"></el-cascader>
      </el-form-item>

      <el-form-item label="讲师资历" prop="introduce">
        <el-input type="textarea" v-model="ruleForm.introduce"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">确认添加</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import teacher from "../../../../api/teacher";

  let id = 0
  export default {
    name: "AddTeacher",
    data() {
      return {
        imageUrl: '',
        ruleForm: {
          name: '',
          level: '',
          dept: '',
          introduce: ''
        },
        rules: {
          name: [
            {required: true, message: '请输入讲师名称', trigger: 'blur'},
            {min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur'}
          ],
          level: [
            {required: true, message: '请选择讲师头衔', trigger: 'blur'}
          ],
          dept: [
            {required: true, message: '请选择所属部门', trigger: 'blur'}
          ],
          introduce: [
            {required: true, message: '请填写讲师资历', trigger: 'blur'}
          ]
        },
        //级联选择器
        value: [],
        options: [{
          value: '后勤部',
          label: '后勤部',
        }, {
          value: '研发部',
          label: '研发部'
        },{
          value: '销售部',
          label: '销售部'
        }]
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // console.log(this.ruleForm);
            this.ruleForm.dept = this.ruleForm.dept[0]
            teacher.addTeacher(this.ruleForm)
            .then(resp => {
              this.$router.push({path: '/dashboard/teacherlist/'})
              this.$message.success('添加成功')
              this.ruleForm = {}
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //级联选择器
      handleChange(value) {
        console.log(value);
      },

    }
  }
</script>

<style scoped>
  .main-content{
    padding: 0 36px;
  }
  .form-size{
    width: 40%;
    margin: auto;
  }
</style>
